import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/controllers/login_controller/login_page_controller.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:common_utils/common_utils.dart';

class LoginPagePassword extends StatelessWidget {

  final LoginPageController loginPageController;
  LoginPagePassword({
    required this.loginPageController
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: Column(
        children: [
          Container(
            height: 49.h,
            padding: EdgeInsets.symmetric(horizontal: 8.w),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1.w,
                  color: lineColor
                )
              )
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  'assets/icons/icon_my.png',
                  width: 20.w,
                  height: 20.w,
                ),
                SizedBox(width: 8.w),
                Expanded(child: TextField(
                  controller: TextEditingController(text: loginPageController.mobile.value),
                  keyboardType: TextInputType.number,
                  inputFormatters: [
                    FilteringTextInputFormatter.allow(RegExp('[0-9]')),
                  ],
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(top: 0, bottom: 0),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    disabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    counterText: '',
                    hintText: '请输入手机号码',
                    hintStyle: TextStyle(
                      fontSize: 14.sp,
                      color: textSubtitleColor,
                      fontWeight: FontWeight.w500
                    )
                  ),
                  maxLength: 11,
                  cursorColor: textBlackColor,
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: textBlackColor,
                    fontWeight: FontWeight.bold
                  ),
                  onChanged: (String value) {
                    loginPageController.mobile.value = value;
                    if (!loginPageController.firstVerification.value) {
                      loginPageController.checkMobileFun();
                    }
                  },
                )),
                Obx(() => Text(
                  loginPageController.checkMobile.value ? '' : '请输入正确手机号',
                  style: TextStyle(
                    color: mainTextColor,
                    fontSize: 12.sp
                  ),
                ))
              ],
            ),
          ),
          SizedBox(height: 15.h),
          Container(
            height: 49.h,
            padding: EdgeInsets.symmetric(horizontal: 8.w),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1.w,
                  color: lineColor
                )
              )
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  'assets/icons/icon_password.png',
                  width: 20.w,
                  height: 20.w,
                ),
                SizedBox(width: 8.w),
                Expanded(child: Obx(() => TextField(
                  obscureText: loginPageController.openPassword.value,
                  inputFormatters: [
                    FilteringTextInputFormatter.allow(RegExp("^[a-z0-9A-Z]+")),
                  ],
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(top: 0, bottom: 0),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    disabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    counterText: '',
                    hintText: '请输入登录密码',
                    hintStyle: TextStyle(
                      fontSize: 14.sp,
                      color: textSubtitleColor,
                      fontWeight: FontWeight.w500
                    )
                  ),
                  cursorColor: textBlackColor,
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: textBlackColor,
                    fontWeight: FontWeight.bold
                  ),
                  onChanged: (String value) {
                    loginPageController.password.value = value;
                  },
                ))),
                Obx(() => Row(
                  children: [
                    Text(
                      loginPageController.checkPassword.value ? '' : '请输入密码',
                      style: TextStyle(
                        color: mainTextColor,
                        fontSize: 12.sp
                      ),
                    ),
                    InkWellUtil.shakeProofInkWell(Image.asset(
                      loginPageController.openPassword.value ? 'assets/icons/icon_password_close.png' : 'assets/icons/icon_password_open.png',
                      width: 20.w,
                      height: 20.w,
                    ), () {
                      loginPageController.openPassword.value = !loginPageController.openPassword.value;
                    })
                  ],
                ))
              ],
            ),
          ),
          SizedBox(height: 10.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              InkWellUtil.shakeProofInkWell(Obx(() => Container(
                width: 22.w,
                height: 22.w,
                child: Image.asset(
                  loginPageController.isAgreement.value ? 'assets/icons/icon_radio_fill.png' : 'assets/icons/icon_radio_line.png',
                  width: 22.w,
                  height: 22.w,
                ),
              )), () {
                loginPageController.isAgreement.value = !loginPageController.isAgreement.value;
              }),
              SizedBox(width: 5.w),
              Row(
                children: [
                  Text(
                    '勾选同意',
                    style: TextStyle(
                      color: textSubtitleColor,
                      fontSize: 12.sp
                    )
                  ),
                  InkWellUtil.shakeProofInkWell(Text(
                    '《隐私政策》',
                    style: TextStyle(
                      color: mainTextColor,
                      fontSize: 12.sp
                    )
                  ), () {
                    Get.toNamed(
                      '${AppRouters.COMMON_PAGE}${AppRouters.ARTICLE_DETAIL_PAGE}',
                      arguments: {
                        'articleId': 2,
                        'title': '隐私政策'
                      }
                    );
                  }),
                  Text(
                    '和',
                    style: TextStyle(
                      color: textSubtitleColor,
                      fontSize: 12.sp
                    )
                  ),
                  InkWellUtil.shakeProofInkWell(Text(
                    '《用户协议》',
                    style: TextStyle(
                      color: mainTextColor,
                      fontSize: 12.sp
                    )
                  ), () {
                    Get.toNamed(
                      '${AppRouters.COMMON_PAGE}${AppRouters.ARTICLE_DETAIL_PAGE}',
                      arguments: {
                        'articleId': 3,
                        'title': '用户协议'
                      }
                    );
                  })
                ],
              ),
            ],
          ),
          SizedBox(height: 44.h),
          Obx(() => TextUtil.isEmpty(loginPageController.mobile.value) || TextUtil.isEmpty(loginPageController.password.value) ? Opacity(
            opacity: .5,
            child: ButtonUtil(
              text: '登录', 
              fontSize: 16.sp, 
              borderRadius: 18.w, 
              height: 36.h, 
              textColor: textSubtitleColor,
              bgColors: [
                lineColor,
                lineColor,
              ],
              onTop: () {}
            ),
          ) : ButtonUtil(
            text: '登录', 
            fontSize: 16.sp, 
            borderRadius: 18.w, 
            height: 36.h, 
            onTop: () {
              loginPageController.passwordLogin();
            }
          )),
          SizedBox(height: 28.h),
          ButtonUtil(
            text: '验证码登录', 
            fontSize: 16.sp, 
            textColor: mainTextColor,
            bgColors: [
              bgWhiteColor,
              bgWhiteColor
            ],
            showBorder: true,
            borderRadius: 18.w, 
            height: 36.h, 
            onTop: () {
              loginPageController.password.value = '';
              loginPageController.loginType.value = 1;
            }
          )
        ],
      ),
    );
  }
}